<template>
  <div class="v_box">
    <vue-d-player
      :id="'dplayer' + vID"
      ref="player"
      style="width: 100%; height: 100%"
      class="dplayer video-box"
    ></vue-d-player>
  </div>
</template>
<script>
// import Hls from "hls.js";
import VueDPlayer from "vue-dplayer";
import DPlayer from "dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
import FlvJs from "flv.js";
export default {
  name: "YrHgyVPlayer",
  components: {
    VueDPlayer,
  },
  props: {
    vID: {
      type: [String, Number],
    },
    vUrl: {
      type: String,
      default: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
    },
  },
  data() {
    return {
      dp: {},
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.initVideo(this.vUrl, this.vID);
    });
  },

  methods: {
    initVideo(val, id) {
      let domId = "dplayer" + id;
      console.log("domId====",domId,this.vUrl)
      this.dp = new DPlayer({
        //播放器的一些参数
        container: document.getElementById(domId),
        video: {
          url: val, //视频地址
          // type: "customHls",
          type: "customFlv",
          customType: {
            // customHls: function (video) {
            //   const hls = new Hls(); //实例化Hls  用于解析m3u8
            //   hls.loadSource(video.src);
            //   hls.attachMedia(video);
            // },
            customFlv: function (video) {
              const flvPlayer = FlvJs.createPlayer({
                type: 'flv',
                url: video.src,
              });
              flvPlayer.attachMediaElement(video);
              flvPlayer.load();
            },
          },
        },
        autoplay: true, //是否自动播放
        theme: "#FADFA3", //主题色
        loop: false, //视频是否循环播放
        lang: "zh-cn",
        screenshot: false, //是否开启截图
        hotkey: false, //是否开启热键
        preload: "auto", //视频是否预加载
        volume: 0, //默认音量
        contextmenu: [],
        highlight: [],
        mutex: false, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
      });
    },
  },
  watch: {
    vUrl: {
      handler(val) {
        this.initVideo(val, this.vID);
      },
      deep: true,
    },
  },
};
</script>
<style>
.dplayer-icons-left,
.dplayer-bar-wrap,
.dplayer-setting,
.dplayer-full-in-icon {
  display: none !important;
}

.video-box {
  width: 100%;
  height: 100%;
  /* max-width: 5rem;
  max-height: 5rem; */
}
</style>
<style lang="scss" scoped>
.v_box {
  width: 100%;
  height: 100%;
}
</style>
